<!-- 此按钮最大层级为 98 如果超过 98 则会影响 uni-ui 表单组件的层级 如 时间日期选择器等等 && 不能 =< 0 否则会被文字穿透 -->
<template>
    <view v-if="type == ''" class="button_box">
        <button class="button" @tap="trigger" :style="{width: breadth,background:backgroundColor}">{{ text }}</button>
    </view>

    <view v-if="type == 'twobutton'" class="button_box">
        <button class="twobutton twobutton_left" @tap="leftTrigger" :style="{width: leftWidth}">{{ oneText }}</button>
        <button class="twobutton twobutton_right" @tap="rightTrigger" :style="{width: rightWidth}">{{ twoText }}</button>
    </view>
</template>

<script setup>
    import { onLoad,onUnload  } from "@dcloudio/uni-app";
    import { computed, reactive, ref } from "vue";
    import { baseUrl } from '@/sheep/config';
//   const props = defineProps(['text']);  // 按钮名称
const props = defineProps({
    text:{
        type:String,
        required:true
    },
    url:{
        type:String,
    },
    breadth:{
        type:String,
        default:'calc(100% - 80rpx)'
    },
    // 以下是双按钮传输的值
    type:{
        type:String,
        default:''
    },
    oneText:{
        type:String,
        required:''
    },
    twoText:{
        type:String,
        required:''
    },
    leftWidth:{
        type:String,
        default:'50%'
    },
    rightWidth:{
        type:String,
        default:'50%'
    },
    backgroundColor:{
        type:String,
        default:'linear-gradient(90deg, rgba(0, 56, 247, 1) 0%, rgba(77, 139, 255, 1) 100%)'
    }
})
const emits = defineEmits(['netWork','leftNetWork','rightNetWork']);

const trigger = () => {
    emits('netWork')
}

// 左侧按钮事件
const leftTrigger = () => {
    emits('leftNetWork')
}

// 右侧按钮事件
const rightTrigger = () => {
    emits('rightNetWork')
}

  </script>

  <style scoped lang="scss">
    page {
        // width: 100%;
        height: 100%;
        position: relative;
    }
    .button_box {
        display: flex;
        height: 144rpx;
        width: 100%;
        background-color: #ffffff;
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 98;
    }

    .button {
        /* width: 100%;
        height: 100%; */
        width: 100%;
        height: 90rpx;
        z-index: 1;
        position: fixed;
        bottom: 56rpx;
        left: 0;
        right: 0;
        border-radius: 50rpx;
        font-family: PingFangSC;
        color: #FFFFFF;
        font-weight: $uni-font-weight;
        font-size: 34rpx;
        font-style: normal;
        text-decoration: none;
        text-align: center;
        letter-spacing: 1rpx; /* 设置文字间距为2像素 */
        margin: 0 40rpx;
    }

    // 双按钮
    .twobutton {
        width: 50%;
        height: 90rpx;
        z-index: 1;
        font-family: PingFangSC;
        font-weight: $uni-font-weight;
        font-size: 34rpx;
        font-style: normal;
        text-decoration: none;
        text-align: center;
        letter-spacing: 1rpx; /* 设置文字间距为2像素 */
        margin: 0 40rpx;
        border-radius: 50rpx;
    }

    .twobutton_left {
        border: 2rpx solid $uni-color-primary;
        color: $uni-color-primary;
    }

    .twobutton_right {
        background: linear-gradient(90deg, rgba(0, 56, 247, 1) 0%, rgba(77, 139, 255, 1) 100%);
        color: #FFFFFF;
    }
  </style>